<template>
  <div class="conversation-editor">
    <div class="editor-header">
      <h3>对话编辑器</h3>
      <div class="header-actions">
        <el-button 
          size="small" 
          :icon="Plus"
          @click="addMessage"
          :disabled="!hasCurrentConversation"
        >
          添加消息
        </el-button>
        <el-button 
          size="small" 
          :icon="CircleCheck"
          type="primary"
          @click="validateCurrentConversation"
          :disabled="!hasCurrentConversation"
        >
          验证
        </el-button>
      </div>
    </div>

    <!-- 无对话选中状态 -->
    <div v-if="!hasCurrentConversation" class="no-conversation">
      <el-empty description="请选择一个对话进行编辑">
        <el-button type="primary" @click="createNewConversation">
          创建新对话
        </el-button>
      </el-empty>
    </div>

    <!-- 对话编辑区域 -->
    <div v-else class="conversation-content">
      <!-- 对话信息 -->
      <div class="conversation-info">
        <el-card shadow="never">
          <div class="info-row">
            <span class="label">{{ conversationStore.currentConversation?.name || `对话 ${conversationStore.currentConversationIndex + 1}` }}</span>
            <div class="conversation-actions">
              <el-button-group size="small">
                <el-button :icon="DocumentCopy" @click="duplicateConversation">复制</el-button>
                <el-button :icon="Refresh" @click="autoFixConversation">自动修复</el-button>
              </el-button-group>
            </div>
          </div>
          
          <!-- 验证状态 -->
          <div class="validation-status" v-if="validationResult">
            <el-alert
              v-if="!validationResult.isValid && validationResult.errors"
              title="验证失败"
              type="error"
              :closable="false"
              show-icon
              style="margin-top: 8px;"
            >
              <ul class="error-list">
                <li v-for="error in validationResult.errors" :key="error">{{ error }}</li>
              </ul>
            </el-alert>
            
            <el-alert
              v-else-if="validationResult.warnings && validationResult.warnings.length > 0"
              title="验证通过（有警告）"
              type="warning"
              :closable="false"
              show-icon
              style="margin-top: 8px;"
            >
              <ul class="warning-list">
                <li v-for="warning in validationResult.warnings" :key="warning">{{ warning }}</li>
              </ul>
            </el-alert>
            
            <el-alert
              v-else
              title="验证通过"
              type="success"
              :closable="false"
              show-icon
              style="margin-top: 8px;"
            />
          </div>
        </el-card>
      </div>

      <!-- 消息列表 -->
      <div class="messages-container">
        <div class="messages-list" ref="messagesList">
          <div class="messages-list-content">
            <div 
              v-for="(message, index) in currentMessages"
              :key="`${messagesRefreshKey}-${index}-${message.from}`"
              class="message-item"
              :class="[`message-${message.from}`, { editing: isEditingMessage(index) }]"
            >

                <!-- 角色标签 -->
                <div class="message-role">
                  <el-tag 
                    :type="getRoleTagType(message.from)"
                    :color="getRoleColor(message.from)"
                    size="small"
                  >
                    {{ getRoleLabel(message.from) }}
                  </el-tag>
                </div>

                <!-- 消息内容 -->
                <div class="message-content">
                  <div 
                    v-if="!isEditingMessage(index)"
                    class="message-text"
                    @dblclick="startEditMessage(index)"
                  >
                    <pre v-if="message.value" class="message-value">{{ message.value }}</pre>
                    <span v-else class="empty-message">双击编辑消息内容...</span>
                  </div>
                  
                  <!-- 内联编辑器 -->
                  <div v-else class="message-editor">
                    <el-select
                      v-model="editingMessageFrom"
                      size="small"
                      style="width: 120px; margin-bottom: 8px;"
                    >
                      <el-option
                        v-for="role in roleTypes"
                        :key="role.value"
                        :label="role.label"
                        :value="role.value"
                      />
                    </el-select>
                    
                    <el-input
                      v-model="editingMessageValue"
                      type="textarea"
                      :autosize="{ minRows: 3, maxRows: 15 }"
                      placeholder="输入消息内容..."
                      resize="vertical"
                    />
                    
                    <div class="editor-actions">
                      <el-button size="small" @click="cancelEditMessage">取消</el-button>
                      <el-button size="small" type="primary" @click="saveEditMessage">保存</el-button>
                    </div>
                  </div>
                </div>

                <!-- 操作按钮 -->
                <div class="message-actions">
                  <el-button-group size="small">
                    <el-button 
                      :icon="ArrowUp" 
                      @click="moveMessageUp(index)"
                      :disabled="index === 0"
                      circle
                      size="small"
                      title="上移"
                    />
                    <el-button 
                      :icon="ArrowDown" 
                      @click="moveMessageDown(index)"
                      :disabled="index === currentMessages.length - 1"
                      circle
                      size="small"
                      title="下移"
                    />
                    <el-button 
                      :icon="Plus" 
                      @click="insertMessageAfter(index)"
                      circle
                      size="small"
                      title="在此处添加消息"
                    />
                    <el-button 
                      :icon="Delete" 
                      type="danger"
                      @click="removeMessage(index)"
                      circle
                      size="small"
                      title="删除"
                    />
                  </el-button-group>
                </div>
            </div>
          </div>
        </div>

        <!-- 添加消息按钮 -->
        <div class="add-message-section">
          <el-dropdown split-button type="primary" @click="addQuickMessage" @command="addSpecificMessage">
            <el-icon><Plus /></el-icon>
            快速添加 ({{ suggestedNextRole }})
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="pair">添加问答对</el-dropdown-item>
                <el-dropdown-item command="tool-pair">添加工具调用对</el-dropdown-item>
                <el-dropdown-item divided command="human">用户输入</el-dropdown-item>
                <el-dropdown-item command="thinking">AI思考</el-dropdown-item>
                <el-dropdown-item command="function_call">函数调用</el-dropdown-item>
                <el-dropdown-item command="observation">执行结果</el-dropdown-item>
                <el-dropdown-item command="gpt">AI回复</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          
          <div class="message-suggestions" v-if="smartSuggestions.length > 0">
            <el-text size="small" type="info">智能建议：</el-text>
            <div class="suggestion-buttons" style="margin-top: 8px;">
              <el-tooltip 
                v-for="suggestion in smartSuggestions" 
                :key="suggestion.role"
                :content="suggestion.description"
                placement="top"
              >
                <el-button 
                  size="small"
                  :type="suggestion.priority >= 80 ? 'primary' : 'default'"
                  @click="addMessage(suggestion.role)"
                  :class="{
                    'high-priority': suggestion.priority >= 80,
                    'medium-priority': suggestion.priority >= 60,
                    'low-priority': suggestion.priority < 60
                  }"
                >
                  {{ getRoleLabel(suggestion.role) }}
                  <span v-if="suggestion.priority >= 80" class="priority-badge">推荐</span>
                </el-button>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 删除确认对话框 -->
    <el-dialog
      v-model="deleteDialogVisible"
      title="删除确认"
      width="400px"
      :close-on-click-modal="false"
      @close="handleDeleteDialogClose"
    >
      <div class="delete-dialog-content">
        <el-icon class="warning-icon" color="#E6A23C" size="24px">
          <WarningFilled />
        </el-icon>
        <div class="delete-message">
          {{ deleteDialogMessage }}
        </div>
      </div>
      
      <template #footer>
        <div v-if="deleteDialogType === 'pair'" class="dialog-footer-three">
          <el-button @click="handleDeleteAction('cancel')" size="default">
            取消
          </el-button>
          <el-button @click="handleDeleteAction('current')" type="info" size="default">
            只删除当前条
          </el-button>
          <el-button @click="handleDeleteAction('pair')" type="danger" size="default">
            删除配对
          </el-button>
        </div>
        <div v-else class="dialog-footer-two">
          <el-button @click="handleDeleteAction('cancel')" size="default">
            取消
          </el-button>
          <el-button @click="handleDeleteAction('confirm')" type="danger" size="default">
            删除
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import { useDatasetStore } from '../../stores/dataset.js'
import { useConversationStore } from '../../stores/conversation.js'
import { ElMessage } from 'element-plus'
import { Plus, Delete, DocumentCopy, Refresh, CircleCheck, ArrowUp, ArrowDown, WarningFilled } from '@element-plus/icons-vue'

const datasetStore = useDatasetStore()
const conversationStore = useConversationStore()

// 响应式数据
const validationResult = ref(null)
const messagesRefreshKey = ref(0) // 强制刷新key

// 使用 store 中的编辑状态
const editingMessageIndex = computed(() => conversationStore.componentEditingState.editingMessageIndex)
const editingMessage = computed(() => conversationStore.componentEditingState.editingMessage)

// 用于双向绑定的可写计算属性
const editingMessageFrom = computed({
  get: () => editingMessage.value?.from || '',
  set: (value) => {
    if (editingMessage.value) {
      conversationStore.setComponentEditingState(editingMessageIndex.value, {
        ...editingMessage.value,
        from: value
      })
    }
  }
})

const editingMessageValue = computed({
  get: () => editingMessage.value?.value || '',
  set: (value) => {
    if (editingMessage.value) {
      conversationStore.setComponentEditingState(editingMessageIndex.value, {
        ...editingMessage.value,
        value: value
      })
    }
  }
})

// 删除对话框相关数据
const deleteDialogVisible = ref(false)
const deleteDialogMessage = ref('')
const deleteDialogType = ref('simple') // 'simple' 或 'pair'
const deleteTargetIndex = ref(-1)
const deletePairIndex = ref(-1)

// 强制刷新消息列表
const forceRefreshMessages = () => {
  messagesRefreshKey.value++
}

// 计算属性
const hasCurrentConversation = computed(() => {
  return conversationStore.currentConversationIndex >= 0 && 
         conversationStore.currentConversation !== null
})

const currentMessages = computed(() => {
  const conversation = conversationStore.currentConversation
  if (!conversation) return []
  return conversation.conversations || []
})

const roleTypes = computed(() => conversationStore.roleTypes)

const suggestedNextRole = computed(() => {
  const messages = conversationStore.currentMessages
  return conversationStore.getSuggestedNextRole(messages)
})

const messageSuggestions = computed(() => {
  const messages = conversationStore.currentMessages
  return conversationStore.getMessageSuggestions(messages)
})

const smartSuggestions = computed(() => {
  const messages = conversationStore.currentMessages
  return conversationStore.getSmartSuggestions(messages)
})

// 方法
const createNewConversation = () => {
  datasetStore.addConversation()
  const newIndex = datasetStore.currentDataset.data.length - 1
  conversationStore.selectConversation(newIndex)
}

const validateCurrentConversation = () => {
  if (!hasCurrentConversation.value) {
    validationResult.value = null
    return
  }
  
  const conversation = conversationStore.currentConversation
  validationResult.value = conversationStore.validateConversationStructure(
    conversation.conversations || []
  )
}

// 监听当前对话变化，重新验证
watch(() => conversationStore.currentConversationIndex, () => {
  validateCurrentConversation()
}, { immediate: true })

const addMessage = (role = null) => {
  const targetRole = role || suggestedNextRole.value
  conversationStore.addMessage(targetRole, '')
  validateCurrentConversation()
}

const addQuickMessage = () => {
  addMessage()
}

const addSpecificMessage = (command) => {
  switch (command) {
    case 'pair':
      addQuestionAnswerPair()
      break
    case 'tool-pair':
      addToolCallPair()
      break
    case 'human':
    case 'thinking':
    case 'function_call':
    case 'observation':
    case 'gpt':
      addMessage(command)
      break
  }
}

const addQuestionAnswerPair = () => {
  conversationStore.addMessage('human', '')
  conversationStore.addMessage('gpt', '')
  validateCurrentConversation()
}

const addToolCallPair = () => {
  conversationStore.addMessage('function_call', '')
  conversationStore.addMessage('observation', '')
  validateCurrentConversation()
}

const insertMessageAfter = (index) => {
  const role = conversationStore.getSuggestedNextRole(
    currentMessages.value.slice(0, index + 1)
  )
  conversationStore.addMessage(role, '', index + 1)
  validateCurrentConversation()
}

const removeMessage = (index) => {
  const messages = currentMessages.value
  const currentMessage = messages[index]
  
  // 移除可能阻止删除最后一条消息的检查
  if (!currentMessage) {
    ElMessage.error('找不到要删除的消息')
    return
  }
  
  // 检查是否需要配对删除
  const pairInfo = findMessagePair(index, messages)
  
  deleteTargetIndex.value = index
  
  if (pairInfo.hasPair) {
    // 有配对消息时，显示三选项对话框
    deleteDialogType.value = 'pair'
    deletePairIndex.value = pairInfo.pairIndex
    
    if (pairInfo.isHumanGptPair) {
      deleteDialogMessage.value = '检测到这是问答对中的一条消息，请选择删除方式：'
    } else if (pairInfo.isToolPair) {
      deleteDialogMessage.value = '检测到这是工具调用对中的一条消息，请选择删除方式：'
    }
  } else {
    // 没有配对消息时，显示简单确认对话框
    deleteDialogType.value = 'simple'
    deleteDialogMessage.value = '确定要删除这条消息吗？'
  }
  
  deleteDialogVisible.value = true
}

// 处理删除对话框的操作
const handleDeleteAction = (action) => {
  deleteDialogVisible.value = false
  
  if (action === 'cancel') {
    return // 取消操作
  }
  
  if (action === 'confirm' || action === 'current') {
    // 删除单条消息
    const indexToDelete = deleteTargetIndex.value
    
    // 如果删除的是正在编辑的消息，关闭编辑模式
    if (editingMessageIndex.value === indexToDelete) {
      cancelEditMessage()
    } else if (editingMessageIndex.value > indexToDelete) {
      // 如果删除的消息在编辑消息之前，需要更新编辑索引
      conversationStore.updateComponentEditingIndex(editingMessageIndex.value - 1)
    }
    
    conversationStore.removeMessage(indexToDelete)
    
    // 强制刷新界面
    nextTick(() => {
      forceRefreshMessages()
    })
    
    ElMessage.success('消息已删除')
  } else if (action === 'pair') {
    // 删除配对消息
    const indicesToDelete = [deleteTargetIndex.value, deletePairIndex.value].sort((a, b) => b - a)
    
    // 检查是否需要关闭编辑模式
    if (indicesToDelete.includes(editingMessageIndex.value)) {
      cancelEditMessage()
    } else {
      // 计算删除后编辑索引的变化
      let adjustment = 0
      for (const idx of indicesToDelete) {
        if (idx < editingMessageIndex.value) {
          adjustment++
        }
      }
      if (adjustment > 0) {
        conversationStore.updateComponentEditingIndex(editingMessageIndex.value - adjustment)
      }
    }
    
    for (const idx of indicesToDelete) {
      conversationStore.removeMessage(idx)
    }
    
    // 强制刷新界面
    nextTick(() => {
      forceRefreshMessages()
    })
    
    ElMessage.success('配对消息已删除')
  }
  
  validateCurrentConversation()
  nextTick(() => {
    forceRefreshMessages()
  })
}

// 处理对话框关闭（点击X或ESC）
const handleDeleteDialogClose = () => {
  deleteDialogVisible.value = false
}

const findMessagePair = (index, messages) => {
  const currentMessage = messages[index]
  const role = currentMessage.from
  
  let hasPair = false
  let pairIndex = -1
  let isHumanGptPair = false
  let isToolPair = false
  
  if (role === 'human') {
    // 查找对应的gpt回复
    for (let i = index + 1; i < messages.length; i++) {
      if (messages[i].from === 'gpt') {
        hasPair = true
        pairIndex = i
        isHumanGptPair = true
        break
      }
      if (messages[i].from === 'human') break // 遇到下一个human停止
    }
  } else if (role === 'gpt') {
    // 查找对应的human提问
    for (let i = index - 1; i >= 0; i--) {
      if (messages[i].from === 'human') {
        hasPair = true
        pairIndex = i
        isHumanGptPair = true
        break
      }
      if (messages[i].from === 'gpt') break // 遇到上一个gpt停止
    }
  } else if (role === 'function_call') {
    // 查找对应的observation
    for (let i = index + 1; i < messages.length; i++) {
      if (messages[i].from === 'observation') {
        hasPair = true
        pairIndex = i
        isToolPair = true
        break
      }
      if (messages[i].from === 'function_call') break // 遇到下一个function_call停止
    }
  } else if (role === 'observation') {
    // 查找对应的function_call
    for (let i = index - 1; i >= 0; i--) {
      if (messages[i].from === 'function_call') {
        hasPair = true
        pairIndex = i
        isToolPair = true
        break
      }
      if (messages[i].from === 'observation') break // 遇到上一个observation停止
    }
  }
  
  return { hasPair, pairIndex, isHumanGptPair, isToolPair }
}

const isEditingMessage = (index) => {
  return editingMessageIndex.value === index
}

const startEditMessage = (index) => {
  const conversation = conversationStore.currentConversation
  if (!conversation || index < 0 || index >= conversation.conversations.length) return
  
  conversationStore.setComponentEditingState(index, conversation.conversations[index])
}

const cancelEditMessage = () => {
  conversationStore.clearComponentEditingState()
}

const saveEditMessage = (isAutoSave = false) => {
  const currentEditingMessage = editingMessage.value
  const currentEditingIndex = editingMessageIndex.value
  
  if (currentEditingMessage && currentEditingIndex >= 0) {
    try {
      conversationStore.updateMessage(currentEditingIndex, currentEditingMessage)
      conversationStore.clearComponentEditingState()
      validateCurrentConversation()
      if (!isAutoSave) {
        ElMessage.success('消息已保存')
      }
      return true
    } catch (error) {
      console.error('保存消息失败:', error)
      ElMessage.error('保存消息失败')
      return false
    }
  }
  return false
}

// 上移消息
const moveMessageUp = (index) => {
  if (index <= 0) return
  
  // 如果正在编辑消息，需要更新编辑索引
  if (editingMessageIndex.value === index) {
    // 当前编辑的消息上移
    conversationStore.updateComponentEditingIndex(index - 1)
  } else if (editingMessageIndex.value === index - 1) {
    // 编辑的消息被当前消息推下去了
    conversationStore.updateComponentEditingIndex(index)
  }
  
  if (conversationStore.moveMessage(index, index - 1)) {
    validateCurrentConversation()
    ElMessage.success('消息已上移')
  }
}

// 下移消息
const moveMessageDown = (index) => {
  const conversation = conversationStore.currentConversation
  if (!conversation || index >= conversation.conversations.length - 1) return
  
  // 如果正在编辑消息，需要更新编辑索引
  if (editingMessageIndex.value === index) {
    // 当前编辑的消息下移
    conversationStore.updateComponentEditingIndex(index + 1)
  } else if (editingMessageIndex.value === index + 1) {
    // 编辑的消息被当前消息推上去了
    conversationStore.updateComponentEditingIndex(index)
  }
  
  if (conversationStore.moveMessage(index, index + 1)) {
    validateCurrentConversation()
    ElMessage.success('消息已下移')
  }
}

const duplicateConversation = () => {
  const current = conversationStore.currentConversation
  if (current) {
    datasetStore.addConversation(JSON.parse(JSON.stringify(current)))
    ElMessage.success('对话已复制')
  }
}

const autoFixConversation = () => {
  if (conversationStore.autoFixConversation()) {
    validateCurrentConversation()
    ElMessage.success('对话结构已自动修复')
  }
}

// 角色相关方法
const getRoleTagType = (role) => {
  const roleInfo = conversationStore.getRoleInfo(role)
  const typeMap = {
    'human': '',
    'gpt': 'danger',
    'thinking': 'info',
    'function_call': 'warning',
    'observation': 'success'
  }
  return typeMap[role] || 'info'
}

const getRoleColor = (role) => {
  const roleInfo = conversationStore.getRoleInfo(role)
  return roleInfo.color
}

const getRoleLabel = (role) => {
  const roleInfo = conversationStore.getRoleInfo(role)
  return roleInfo.label
}
</script>

<style scoped>
.conversation-editor {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.editor-header h3 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.no-conversation {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.conversation-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.conversation-info {
  margin-bottom: 16px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.label {
  font-weight: 500;
  color: #303133;
}

.error-list, .warning-list {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.messages-container {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.messages-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
}

.messages-list-content {
  min-height: 100%;
}

.message-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  margin-bottom: 12px;
  background: white;
  transition: all 0.2s;
}

.message-item:hover {
  border-color: #c6e2ff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message-item.editing {
  border-color: #409eff;
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.3);
}

.message-role {
  flex-shrink: 0;
}

.message-content {
  flex: 1;
  min-width: 0;
}

.message-text {
  cursor: pointer;
  min-height: 20px;
}

.message-value {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  font-family: inherit;
  line-height: 1.5;
}

.empty-message {
  color: #c0c4cc;
  font-style: italic;
}

.message-editor {
  width: 100%;
}

.editor-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: flex-end;
}

.message-actions {
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
}

.message-item:hover .message-actions {
  opacity: 1;
}

.add-message-section {
  padding: 16px 0;
  border-top: 1px solid #ebeef5;
}

.message-suggestions {
  margin-top: 12px;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.suggestion-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* 建议按钮优先级样式 */
.high-priority {
  border-color: #409eff;
  color: #409eff;
  position: relative;
}

.high-priority:hover {
  background-color: #409eff;
  color: white;
}

.medium-priority {
  border-color: #e6a23c;
  color: #e6a23c;
}

.medium-priority:hover {
  background-color: #e6a23c;
  color: white;
}

.low-priority {
  border-color: #909399;
  color: #909399;
}

.low-priority:hover {
  background-color: #909399;
  color: white;
}

.priority-badge {
  font-size: 10px;
  margin-left: 4px;
  padding: 1px 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

/* 不同角色的消息样式 */
.message-human {
  border-left: 4px solid #409eff;
}

.message-gpt {
  border-left: 4px solid #f56c6c;
}

.message-thinking {
  border-left: 4px solid #909399;
  background-color: #fafafa;
}

.message-function_call {
  border-left: 4px solid #e6a23c;
}

.message-observation {
  border-left: 4px solid #67c23a;
}

/* 角色标签文字颜色 */
:deep(.el-tag) {
  color: white !important;
  font-weight: 500;
}

/* 确保所有角色标签文字都是白色 */
:deep(.el-tag.el-tag--primary),
:deep(.el-tag.el-tag--success),
:deep(.el-tag.el-tag--warning),
:deep(.el-tag.el-tag--danger),
:deep(.el-tag.el-tag--info) {
  color: white !important;
}

/* 特定角色标签样式 */
:deep(.el-tag[style*="background-color"]) {
  color: white !important;
  border-color: transparent !important;
}

.delete-dialog-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
}

.warning-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.delete-message {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: #606266;
}

.dialog-footer-three {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.dialog-footer-two {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
</style> 